'use client'

import { useState, useMemo } from 'react'
import ScatterChart from './ScatterChart'

export default function Chart() {
  const [xAxis, setXAxis] = useState('Pricing')
  const [yAxis, setYAxis] = useState('Pricing')

  const options = useMemo(
    () => ['Innovation', 'Product Complexity', 'Integration Depth', 'Pricing', 'Brand Recognition'],
    []
  )

  const data = useMemo(
    () => [
      { company: 'Tapplock', x: 85, y: 75, color: '#6ea8ff' },
      { company: 'Assa Abloy', x: 75, y: 90 },
      { company: 'Allegion', x: 70, y: 85 }
    ],
    []
  )

  const handleReset = () => {
    setXAxis('Pricing')
    setYAxis('Pricing')
  }

  return (
    <div className="rec-card w-full max-w-6xl mx-auto rounded-2xl border border-[#1f2533] p-[16px] bg-[#10141f] text-gray-300">
      {/* 标题 */}
      <h2 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4">
        Competitive Map — Two-Axis Scatter
      </h2>

      {/* 条件选择区 */}
      <div className="flex flex-wrap items-center gap-3 pb-4 mb-4 border-b border-[#1f2533]">
        {/* X轴 */}
        <AxisSelector label="X-axis" value={xAxis} setValue={setXAxis} options={options} />
        {/* Y轴 */}
        <AxisSelector label="Y-axis" value={yAxis} setValue={setYAxis} options={options} />
        {/* Reset */}
        <div
          onClick={handleReset}
          className="bg-[#1a1f2b] hover:bg-[#232a3a] text-gray-200 text-sm font-medium px-4 py-1.5 rounded-md border border-[#2b3142] transition-all cursor-pointer">
          Reset
        </div>
      </div>

      {/* 图表 */}
      <ScatterChart data={data} xLabel={xAxis} yLabel={yAxis} />
    </div>
  )
}

function AxisSelector({ label, value, setValue, options }) {
  return (
    <div className="flex items-center gap-2">
      <span className="text-gray-300 text-sm font-medium">{label}</span>
      <select
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="bg-[#1a1f2b] text-gray-200 text-sm px-3 py-1.5 rounded-md border border-[#2b3142] focus:border-[#8b5cf6] focus:outline-none focus:ring-1 focus:ring-[#8b5cf6] transition-all">
        {options.map((opt) => (
          <option key={opt} value={opt} className="bg-[#1a1f2b] text-gray-100">
            {opt}
          </option>
        ))}
      </select>
    </div>
  )
}
